<template>
    <div class="register-page">

        <el-card class="register-form">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">

                <el-form-item label="设置账号" prop="account">
                    <el-input v-model="form.account"></el-input>
                </el-form-item>


                <el-form-item label="设置密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" v-model="form.checkPassword"></el-input>
                </el-form-item>

                <el-form-item label="设置性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="0">男</el-radio>
                        <el-radio label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="验证码" prop="code">
                    <div class="code-box">
                        <el-input class="code-input" v-model="form.code"></el-input>
                        <el-image
                                @click="getCodeImg"
                                style="width: 200px; height: 80px"
                                :src="codeUrl"
                                fit="fill"></el-image>
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button class="register-btn" type="primary" @click="submit">注册</el-button>
                    <el-button class="register-btn" type="info" @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>


    </div>
</template>

<script>
    import {getCodeImg} from "@/api/login"
    import {register} from "@/api/user"

    export default {
        name: 'Register',
        data() {

            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form.checkPassword !== '') {
                        this.$refs.form.validateField('checkPassword');
                    }
                    callback();
                }
            }
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }

            return {
                // 验证码地址
                codeUrl: "",
                // 注册表单
                form: {
                    account: "",
                    password: "",
                    checkPassword: "",
                    gender: "0",
                    code: "",
                    uuid: ""
                },
                // 校验规则
                rules: {
                    account: [
                        {required: true, message: '请设置账号', trigger: 'blur'},
                        {min: 11, max: 11, message: '请设置长度为11位的账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请设置密码', trigger: 'blur'},
                        {validator: validatePass, trigger: 'blur'},
                        {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
                    ],
                    checkPassword: [
                        {required: true, message: '请设置密码', trigger: 'blur'},
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ]
                }
            };
        },
        methods: {
            // 注册
            submit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        register(this.form).then(res => {
                            console.log(res)
                        })
                    } else {
                        this.msgError("请输入完整信息")
                        return false;
                    }
                })
            },
            // 获取验证码
            getCodeImg() {
                // TODO 限流处理
                getCodeImg().then(res => {
                    let {uuid, img} = res
                    this.codeUrl = "data:image/gif;base64," + img
                    this.form.uuid = uuid

                })
            }
        },
        mounted() {
            this.getCodeImg()
        },
        components: {}
    }
</script>

<style scoped lang='less'>
    .register-page {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;

        .register-form {
            width: 600px;

            .code-box {
                display: flex;

                .code-input {
                    width: 150px;
                    margin-right: 10px;
                }

            }

        }

    }
</style>
